<template>
	<view class="view_pages">
		<u-navbar :is-back="true" back-icon-color="#000000" title-size="34" title="充值中心" :background="background"
			:border-bottom="false" title-color="#000000"></u-navbar>

		<view class="top_card">
			<view class="card">
				<view class="_coin">口袋币 余额</view>
				<view class="total_money">{{userinfo.pdCoins}} <text >(PdCoin)</text></view>
			</view>
		</view>

		<view class="charge_box">
		<!-- 	<view class="input_box">
				<view class="_title">输入充值数量</view>
				<view class="_input">

					<u-field ref="input" class="u_input_view" input-align="right" placeholder="输入充值数量" v-model="input_amount"
						@input="inputValidate" :type="number" :border="border" @focus="checkpdcoins" />
					<view class="_input_p"> PdCoin </view>
				</view>

			</view> -->
			<view class="select_box">
				<view class="_title">选择充值数量 </view>

				<view class="list">
					<view class="_li" :class="{active:selectedIndex==index}" v-for="(item,index) in selectLists"
						@click="selectedFn(index)">
						<view class="discount" v-if="item.discount"> 优惠 </view>
						<view class="pd_coin">{{item.pdCoin}}口袋币 </view>
						<view class="money">￥{{item.money}} </view>
					</view>
				</view>

			</view>
		</view>

		<view class="submit_btn" @click="payc">立即充值{{selectedIndex!=-1 ? `(￥${selectLists[selectedIndex].money})` : ''}}		</view>
		<!-- <checkphone></checkphone> -->
	</view>
</template>

<script>
	import {checkphone} from '@/components/checkphone'
	import { findTenantsPay , topUpCoins ,genPdCoinTrade} from '../../api/charging'
	import { wxJsPay} from '../../api/login'
	export default {
		components:{
			checkphone
		},
		data() {
			return {
				background: {
					background: '#ffffff'
				},
				input_amount: '',
				input_amount_before: '',
				selectLists: [{
						discount: false,
						pdCoin: 5,
						money: 5,
					},
					{
						discount: false,
						pdCoin: 10,
						money: 10,
					},
					{
						discount: false,
						pdCoin: 20,
						money: 20,
					},
					{
						discount: false,
						pdCoin: 40,
						money: 40,
					},
					{
						discount: false,
						pdCoin: 50,
						money: 50,
					}, {
						discount: false,
						pdCoin: 60,
						money: 60,
					},
				],
				selectedIndex: -1,
				userinfo:'',
				inputmoney:''
			}
		},
		onLoad() {
			this.checkpay()
			checkphone
		},
		onShow() {
			this.checkpay()
		},
		methods: {
			inputValidate(value){
				console.group();
				console.log(parseInt(this.input_amount));
				console.log(isNaN(parseInt(this.input_amount)));
				console.log(parseInt(this.input_amount).toString()!=this.input_amount);
				console.log(this.input_amount)
				console.log(this.input_amount_before)
				if(isNaN(parseInt(this.input_amount)) || parseInt(this.input_amount).toString()!=this.input_amount){
					value = this.input_amount = this.input_amount_before;
				}else{
					value = this.input_amount_before = this.input_amount;
				}
				console.log(value)
				console.log(this.input_amount)
				console.log(this.input_amount_before)
				// console.log(/(\d+\.\d*)|\d*/.test(value));
				// if(/(\d+\.\d*)|\d*/.test(value)&&!/\..*\./.test(value)){
				// 	console.log(1);
				// 	if(/\d+\.\d{3}/.test(value)){
				// 		console.log(/\d+\.\d{2}/.exec(value));
				// 		value = this.input_amount = this.input_amount_before = /\d+\.\d{2}/.exec(value)[0];
				// 	}
				// }else {
				// 	console.log(2);
				// 	value = this.input_amount = this.input_amount_before;
				// }
				// this.input_amount = this.input_amount_before = value = value.replace(/-/g,'');
				// console.log(value);
				// console.log(this.input_amount);
				// console.log(this.input_amount_before);
				console.groupEnd();
				return value;
			},
			//充钱
			payc(){
				// bigDecimal
				
				// let pdCoin = this.inputmoney != '' ? this.inputmoney : this.selectLists[this.selectedIndex].pdCoin
				
				let pdCoin = ''
				let _this = this
				console.log(this.input_amount,'金钱')
				if(this.input_amount != ''){
					pdCoin = Number(this.input_amount)
				}else{
					pdCoin = this.selectLists[this.selectedIndex].money
				}
				// genPdCoinTrade({totalFee:pdCoin}).then(res=>{
					// if(res.code==200){
					// 	uni.showToast({
					// 	  title: "正在跳转中",
					// 	  icon:'success',
					// 	  duration: 1000
					// 	})
						// setTimeout(function () {
						//     uni.reLaunch({
						//     	url:'./payinfo?data='+encodeURIComponent(JSON.stringify(res.result))
						//     })
						// }, 1000);
						// this.checkpay()
						 wxJsPay({totalFee:pdCoin*100}).then(code=>{
						 	if(!code?.result?.pay_info){
						 		this.$msg('订单已支付或关闭')
						 	}
						 	let data = code.result
						 	let pay_info = JSON.parse(code.result.pay_info)
                               
                            wx.requestPayment(
								{ 
								"timeStamp":pay_info.timeStamp,
								"nonceStr": pay_info.nonceStr,
								"package": pay_info.package,
								"signType":pay_info.signType,
								"paySign": pay_info.paySign,
								"success":function(res){
									console.log('支付成功',res)
									uni.showToast({
										  title: "支付成功",
										  icon:'error',
										  duration: 1000
										})
									_this.checkpay()
								},     
								"fail":function(res){
									uni.showToast({
										  title: "支付失败",
										  icon:'error',
										  duration: 1000
										})
								},
								"complete":function(res){}
                            })
						 	      //调用支付前应先处理订单信息，然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数  
						 	     //下面的rs.data为后台处理完订单后返回的；我的业务模式为用户点击提交订单，请求后台添加订单接口，订单添加完成后，后台根据订单id，订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;  
						 	    
						 })
						// 定时器跳转到待H5的页面
						// setTimeout(function () {
						//     uni.reLaunch({
						//     	url:'./payinfo?data='+encodeURIComponent(JSON.stringify(res.result))
						//     })
						// }, 1000);
						
					// }else{
					// 	uni.showToast({
					// 	  title: "充值失败",
					// 	  icon:'none',
					// 	  duration: 2000
					// 	})
					// }
				// })
			},
			//选择手工金额取消下面选择
			checkpdcoins(){
				this.selectedIndex = -1
				
				this.input_amount  = this.input_amount
				
			},
			selectedFn(index) {
				this.selectedIndex = index
				
				this.inputmoney  = ''
			},
			//查询用户钱包
			checkpay() {
				findTenantsPay().then(res => {
					console.log(res,'111')
					this.userinfo = res.result
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.view_pages {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.top_card {
			display: flex;
			justify-content: center;

			.card {
				margin-top: 40rpx;
				width: 688rpx;
				height: 218rpx;
				background-image: url('../../static/images/charging/topUp-bg.png');
				background-repeat: no-repeat;
				background-size: 100%;
				overflow: hidden;

				._coin {
					margin-top: 46rpx;
					margin-left: 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 400;
					letter-spacing: 0.1rem;
				}

				.total_money {
					margin-top: 18rpx;
					margin-left: 50rpx;
					font-weight: 500;
					font-size: 48rpx;
					color: #FFFFFF;
					letter-spacing: 0.12rem;
					text{
						margin-left: 10rpx;
						font-size: 30rpx;
						color: #FFFFFF;
						font-weight: 400;
						letter-spacing: 0.1rem;
					}
				}
			}
		}

		.charge_box {
			flex-grow: 1;
			padding: 0rpx 30rpx;
			box-shadow: 0rpx -15rpx 26rpx -9rpx rgba(99, 158, 225, 0.82);

			.input_box {
				margin-top: 55rpx;

				._input {
					display: flex;
					align-items: center;
					padding: 26rpx;
					box-shadow: 0rpx 0rpx 27rpx -1rpx rgba(203, 203, 203, 0.4);
					margin-top: 24rpx;
					border-radius: 12rpx;

					.icon_coin {
						color: #000000;
						font-size: 32rpx;

						font-weight: 400;

					}

					.u_input_view {
						flex-grow: 1;
						margin: 0 14rpx;
					}

					.unit {
						font-size: 26rpx;
						font-weight: 400;
						color: #303133;
					}
					._input_p{
						padding-left: 20rpx;
						padding-right: 15rpx;
					}
				}
			}

			.select_box {
				margin-top: 75rpx;

				.list {
					margin-top: 22rpx;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;

					._li {
						position: relative;
						flex-shrink: 0;
						width: 210rpx;
						height: 134rpx;
						border-radius: 16rpx;
						border: 2rpx solid #C0C4CC;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 28rpx;

						.discount {
							position: absolute;
							left: -2rpx;
							top: -2rpx;
							width: 68rpx;
							height: 34rpx;
							background: #0A348B;
							border-radius: 16rpx 0rpx 16rpx 0;
							font-size: 18rpx;
							color: #FFFFFF;
							font-weight: 400;
							text-align: center;
							line-height: 32rpx;
						}

						.pd_coin {

							color: #303133;
							font-weight: 400;
							font-size: 26rpx;
						}

						.money {

							font-weight: 400;
							font-size: 24rpx;
							color: #909399;
						}
					}

					.active {

						background: #EFF4FF;
						border: 3rpx solid #0A348B;

						.pd_coin,
						.money {

							color: #0A348B;
						}
					}
				}
			}
		}


		.submit_btn {
			width: 690rpx;
			height: 90rpx;
			background: #0A348B;
			border-radius: 20rpx;
			text-align: center;
			line-height: 90rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 400;
			margin: 30rpx auto;
		}
	}
</style>
